<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>诊断统计分析</title>
    <!-- 直接引入Chart.js -->
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
</head>
<body>
<div class="card shadow-lg rounded-lg overflow-hidden mb-8">
    <div class="card-header bg-gradient-to-r from-primary to-blue-600 text-white">
        <div class="d-flex justify-content-between align-items-center p-2">
            <h5 class="mb-0 text-lg font-bold"><i class="fa fa-bar-chart mr-2"></i>诊断统计分析</h5>
            <div class="d-flex gap-3">
                <select id="statistics-time-range" class="form-select form-select-sm bg-white text-gray-800 border-gray-300 rounded-lg px-4 py-2 appearance-none pr-10 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-all duration-200 shadow-sm hover:shadow-md cursor-pointer">
                    <option value="all">全部时间</option>
                    <option value="today">今天</option>
                    <option value="week">本周</option>
                    <option value="month">本月</option>
                    <option value="quarter">近三个月</option>
                </select>
                <button id="export-statistics" class="btn btn-white text-black hover:bg-gray-100 transition-all px-4 py-2 font-medium rounded-lg">
                    <i class="fa fa-download mr-1"></i>导出
                </button>
            </div>
        </div>
    </div>
    <div class="card-body p-8">
        <style>
            /* 美化下拉选择框 */
            #statistics-time-range {
                background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23666' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
                background-repeat: no-repeat;
                background-position: right 0.7rem center;
                background-size: 16px 12px;
            }
            
            /* 统计卡片样式 */
            .stats-card {
                background: white;
                border-radius: 15px;
                padding: 25px;
                box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
                transition: transform 0.3s ease, box-shadow 0.3s ease;
                border-left: 5px solid transparent;
                display: flex;
                align-items: center;
                margin-bottom: 15px;
            }
            
            .stats-card:hover {
                transform: translateY(-5px);
                box-shadow: 0 15px 30px rgba(0, 0, 0, 0.12);
            }
            
            .stats-icon {
                width: 60px;
                height: 60px;
                border-radius: 50%;
                display: flex;
                align-items: center;
                justify-content: center;
                font-size: 24px;
                margin-right: 20px;
                color: white;
            }
            
            .stats-content {
                flex: 1;
            }
            
            .stats-value {
                font-size: 28px;
                font-weight: 800;
                margin-bottom: 8px;
                color: #1a202c; /* 深色文字，提高对比度 */
            }
            
            .stats-label {
                font-size: 14px;
                color: #4a5568; /* 加深标签颜色 */
                text-transform: uppercase;
                letter-spacing: 0.5px;
                font-weight: 500;
            }
            
            /* 卡片悬停效果 */
            .stats-card:nth-child(1) {
                border-left-color: #007bff;
            }
            .stats-card:nth-child(2) {
                border-left-color: #28a745;
            }
            .stats-card:nth-child(3) {
                border-left-color: #ffc107;
            }
            .stats-card:nth-child(4) {
                border-left-color: #17a2b8;
            }
            
            /* 图表容器样式 */
            .chart-container {
                position: relative;
                height: 320px;
                width: 100%;
            }
            
            /* 表格样式 */
            table {
                border-radius: 10px;
                overflow: hidden;
                box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
            }
            
            /* 动画效果 */
            @keyframes fadeInUp {
                from {
                    opacity: 0;
                    transform: translateY(30px);
                }
                to {
                    opacity: 1;
                    transform: translateY(0);
                }
            }
            
            .fade-in-up {
                animation: fadeInUp 0.8s ease-out;
            }
            
            .delay-100 {
                animation-delay: 0.1s;
            }
            
            .delay-200 {
                animation-delay: 0.2s;
            }
            
            .delay-300 {
                animation-delay: 0.3s;
            }
            
            .delay-400 {
                animation-delay: 0.4s;
            }
            
            /* 渐变背景 */
            .bg-primary {
                background: linear-gradient(135deg, #007bff, #0056b3) !important;
            }
            
            .bg-success {
                background: linear-gradient(135deg, #28a745, #1e7e34) !important;
            }
            
            .bg-warning {
                background: linear-gradient(135deg, #ffc107, #e0a800) !important;
            }
            
            .bg-info {
                background: linear-gradient(135deg, #17a2b8, #138496) !important;
            }
            
            /* 调整页面背景 */
            body {
                background-color: #f7fafc;
            }
            
            /* 增强文本对比度 */
            h5, h6 {
                color: #1a202c;
                font-weight: 700;
            }
            
            /* 增强选择框样式 */
            .form-select {
                color: #1a202c !important;
            }
            
            /* 表格单元格增强 */
            td, th {
                font-weight: 500;
                color: #2d3748;
            }
            
            /* 增强进度条对比度 */
            .bg-blue-600 {
                background-color: #2563eb !important;
            }
        </style>
        <!-- 统计卡片 -->
        <div class="row mb-10">
            <div class="col-md-3 mb-4">
                <div class="stats-card fade-in-up">
                    <div class="stats-icon bg-primary">
                        <i class="fa fa-stethoscope"></i>
                    </div>
                    <div class="stats-content">
                        <div class="stats-value" id="total-diagnoses">132</div>
                        <div class="stats-label">总诊断次数</div>
                    </div>
                </div>
            </div>
            <div class="col-md-3 mb-4">
                <div class="stats-card fade-in-up delay-100">
                    <div class="stats-icon bg-success">
                        <i class="fa fa-check-circle"></i>
                    </div>
                    <div class="stats-content">
                        <div class="stats-value" id="normal-count">78</div>
                        <div class="stats-label">正常细胞</div>
                    </div>
                </div>
            </div>
            <div class="col-md-3 mb-4">
                <div class="stats-card fade-in-up delay-200">
                    <div class="stats-icon bg-warning">
                        <i class="fa fa-exclamation-triangle"></i>
                    </div>
                    <div class="stats-content">
                        <div class="stats-value" id="abnormal-count">54</div>
                        <div class="stats-label">异常细胞</div>
                    </div>
                </div>
            </div>
            <div class="col-md-3 mb-4">
                <div class="stats-card fade-in-up delay-300">
                    <div class="stats-icon bg-info">
                        <i class="fa fa-tachometer-alt"></i>
                    </div>
                    <div class="stats-content">
                        <div class="stats-value" id="confidence-rate">85%</div>
                        <div class="stats-label">高置信度率</div>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- 图表区域 -->
        <div class="row mb-10">
            <div class="col-md-6">
                <div class="card h-100 shadow-md hover:shadow-xl transition-shadow duration-300 border-0 rounded-xl fade-in-up delay-200">
                    <div class="card-body p-6">
                        <h6 class="mb-6 font-bold text-lg text-gray-800">诊断结果分布</h6>
                        <div class="chart-container">
                            <canvas id="distribution-chart" height="280"></canvas>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-md-6">
                <div class="card h-100 shadow-md hover:shadow-xl transition-shadow duration-300 border-0 rounded-xl fade-in-up delay-300">
                    <div class="card-body p-6">
                        <h6 class="mb-6 font-bold text-lg text-gray-800">近期诊断趋势</h6>
                        <div class="chart-container">
                            <canvas id="trend-chart" height="280"></canvas>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- 详细统计表格 -->
        <div class="card shadow-md border-0 rounded-xl fade-in-up delay-400 mt-16">
            <div class="card-body p-6">
                <h6 class="mb-6 font-bold text-lg text-gray-800">诊断类型详细统计</h6>
                <div class="table-responsive">
                    <table class="table table-hover bg-white rounded-xl">
                        <thead class="bg-gray-100 text-gray-800">
                            <tr>
                                <th class="border-0 py-4 px-6 font-bold">诊断类型</th>
                                <th class="border-0 py-4 px-6 font-bold">数量</th>
                                <th class="border-0 py-4 px-6 font-bold">占比</th>
                                <th class="border-0 py-4 px-6 font-bold">平均置信度</th>
                            </tr>
                        </thead>
                        <tbody id="statistics-table-body" class="divide-y divide-gray-100">
                            <!-- 静态伪造数据 -->
                            <tr class="hover:bg-gray-50 transition-colors duration-150">
                                <td class="py-3 px-4 text-success font-weight-semibold">正常</td>
                                <td class="py-3 px-4 font-medium">78</td>
                                <td class="py-3 px-4">
                                    <div class="d-flex items-center">
                                        <div class="w-24 bg-gray-200 rounded-full h-2.5 mr-2">
                                            <div class="h-2.5 rounded-full bg-blue-600" style="width: 59%"></div>
                                        </div>
                                        59%
                                    </div>
                                </td>
                                <td class="py-3 px-4 text-success font-medium">90.2%</td>
                            </tr>
                            <tr class="hover:bg-gray-50 transition-colors duration-150">
                                <td class="py-3 px-4 text-warning font-weight-semibold">ASC-US</td>
                                <td class="py-3 px-4 font-medium">22</td>
                                <td class="py-3 px-4">
                                    <div class="d-flex items-center">
                                        <div class="w-24 bg-gray-200 rounded-full h-2.5 mr-2">
                                            <div class="h-2.5 rounded-full bg-blue-600" style="width: 17%"></div>
                                        </div>
                                        17%
                                    </div>
                                </td>
                                <td class="py-3 px-4 text-warning font-medium">72.3%</td>
                            </tr>
                            <tr class="hover:bg-gray-50 transition-colors duration-150">
                                <td class="py-3 px-4 text-orange font-weight-semibold">LSIL</td>
                                <td class="py-3 px-4 font-medium">18</td>
                                <td class="py-3 px-4">
                                    <div class="d-flex items-center">
                                        <div class="w-24 bg-gray-200 rounded-full h-2.5 mr-2">
                                            <div class="h-2.5 rounded-full bg-blue-600" style="width: 14%"></div>
                                        </div>
                                        14%
                                    </div>
                                </td>
                                <td class="py-3 px-4 text-warning font-medium">77.1%</td>
                            </tr>
                            <tr class="hover:bg-gray-50 transition-colors duration-150">
                                <td class="py-3 px-4 text-danger font-weight-semibold">HSIL</td>
                                <td class="py-3 px-4 font-medium">10</td>
                                <td class="py-3 px-4">
                                    <div class="d-flex items-center">
                                        <div class="w-24 bg-gray-200 rounded-full h-2.5 mr-2">
                                            <div class="h-2.5 rounded-full bg-blue-600" style="width: 8%"></div>
                                        </div>
                                        8%
                                    </div>
                                </td>
                                <td class="py-3 px-4 text-success font-medium">86.5%</td>
                            </tr>
                            <tr class="hover:bg-gray-50 transition-colors duration-150">
                                <td class="py-3 px-4 text-secondary">其他</td>
                                <td class="py-3 px-4 font-medium">4</td>
                                <td class="py-3 px-4">
                                    <div class="d-flex items-center">
                                        <div class="w-24 bg-gray-200 rounded-full h-2.5 mr-2">
                                            <div class="h-2.5 rounded-full bg-blue-600" style="width: 3%"></div>
                                        </div>
                                        3%
                                    </div>
                                </td>
                                <td class="py-3 px-4 text-danger font-medium">61.8%</td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- 统计分析JavaScript -->
<script>
    // 格式化日期
    function formatDate(timestamp) {
        if (!timestamp) return '未知时间';
        const date = new Date(timestamp);
        if (isNaN(date.getTime())) return '无效时间';
        return date.toLocaleDateString('zh-CN');
    }
    
    // 从statistics_data.md文件直接内置的样例数据
    function generateMockData() {
        // 基于statistics_data.md文档中的数据结构和分布
        // 直接使用硬编码的数据，确保每次加载都显示完全一致的数据
        const data = [];
        const now = new Date();
        
        // 按照文档中定义的数据分布直接创建记录
        // 诊断类型分布：正常(78), ASC-US(22), LSIL(18), HSIL(10), 其他(4)
        // 时间分布：最近90天，总计132条记录
        
        // 正常细胞 - 78条记录，平均置信度90.2%
        for (let i = 0; i < 78; i++) {
            const daysAgo = Math.floor((90 * i) / 132);
            const date = new Date(now);
            date.setDate(date.getDate() - daysAgo);
            
            // 计算确定的置信度值，确保平均为90.2%
            const baseConfidence = 0.902;
            // 添加小的固定变化使数据看起来更自然，但总和保持平均值
            const variation = (i % 20 - 10) * 0.01;
            const confidence = Math.min(1.0, Math.max(0.7, Math.round((baseConfidence + variation) * 100) / 100));
            
            data.push({
                date: new Date(date),
                timestamp: date.getTime(),
                type: '正常',
                confidence: confidence
            });
        }
        
        // ASC-US - 22条记录，平均置信度72.3%
        for (let i = 0; i < 22; i++) {
            const daysAgo = Math.floor((90 * (i + 78)) / 132);
            const date = new Date(now);
            date.setDate(date.getDate() - daysAgo);
            
            const baseConfidence = 0.723;
            const variation = (i % 10 - 5) * 0.015;
            const confidence = Math.min(0.8, Math.max(0.6, Math.round((baseConfidence + variation) * 100) / 100));
            
            data.push({
                date: new Date(date),
                timestamp: date.getTime(),
                type: 'ASC-US',
                confidence: confidence
            });
        }
        
        // LSIL - 18条记录，平均置信度77.1%
        for (let i = 0; i < 18; i++) {
            const daysAgo = Math.floor((90 * (i + 100)) / 132);
            const date = new Date(now);
            date.setDate(date.getDate() - daysAgo);
            
            const baseConfidence = 0.771;
            const variation = (i % 9 - 4.5) * 0.02;
            const confidence = Math.min(0.85, Math.max(0.65, Math.round((baseConfidence + variation) * 100) / 100));
            
            data.push({
                date: new Date(date),
                timestamp: date.getTime(),
                type: 'LSIL',
                confidence: confidence
            });
        }
        
        // HSIL - 10条记录，平均置信度86.5%
        for (let i = 0; i < 10; i++) {
            const daysAgo = Math.floor((90 * (i + 118)) / 132);
            const date = new Date(now);
            date.setDate(date.getDate() - daysAgo);
            
            const baseConfidence = 0.865;
            const variation = (i % 5 - 2) * 0.025;
            const confidence = Math.min(0.95, Math.max(0.7, Math.round((baseConfidence + variation) * 100) / 100));
            
            data.push({
                date: new Date(date),
                timestamp: date.getTime(),
                type: 'HSIL',
                confidence: confidence
            });
        }
        
        // 其他 - 4条记录，平均置信度61.8%
        for (let i = 0; i < 4; i++) {
            const daysAgo = Math.floor((90 * (i + 128)) / 132);
            const date = new Date(now);
            date.setDate(date.getDate() - daysAgo);
            
            const baseConfidence = 0.618;
            const variation = (i % 4 - 1.5) * 0.03;
            const confidence = Math.min(0.7, Math.max(0.5, Math.round((baseConfidence + variation) * 100) / 100));
            
            data.push({
                date: new Date(date),
                timestamp: date.getTime(),
                type: '其他',
                confidence: confidence
            });
        }
        
        // 确保时间分布符合文档描述：最近7天约35条，最近30天约72条，最近90天约132条
        // 通过排序和调整确保数据按时间顺序排列
        return data.sort((a, b) => a.timestamp - b.timestamp);
    }
    
    // 根据时间范围筛选数据
    function filterDataByTimeRange(data, timeRange) {
        const now = new Date();
        let cutoffDate = new Date(0); // 1970-01-01，代表全部时间
        
        switch (timeRange) {
            case 'today':
                cutoffDate = new Date(now.getFullYear(), now.getMonth(), now.getDate());
                break;
            case 'week':
                cutoffDate = new Date(now.getTime() - 7 * 24 * 60 * 60 * 1000);
                break;
            case 'month':
                cutoffDate = new Date(now.getFullYear(), now.getMonth(), 1);
                break;
            case 'quarter':
                cutoffDate = new Date(now.getTime() - 90 * 24 * 60 * 60 * 1000);
                break;
        }
        
        return data.filter(item => item.timestamp >= cutoffDate.getTime());
    }
    
    // 计算统计指标
    function calculateStatistics(data) {
        const total = data.length;
        const normalCount = data.filter(item => item.type === '正常').length;
        const abnormalCount = total - normalCount;
        const highConfidenceCount = data.filter(item => item.confidence >= 0.8).length;
        const confidenceRate = total > 0 ? Math.round((highConfidenceCount / total) * 100) : 0;
        
        // 计算不同类型的统计
        const typeStats = {};
        data.forEach(item => {
            if (!typeStats[item.type]) {
                typeStats[item.type] = {
                    count: 0,
                    totalConfidence: 0,
                    type: item.type
                };
            }
            typeStats[item.type].count++;
            typeStats[item.type].totalConfidence += item.confidence;
        });
        
        // 计算百分比和平均置信度
        Object.values(typeStats).forEach(stat => {
            stat.percentage = total > 0 ? Math.round((stat.count / total) * 100) : 0;
            stat.avgConfidence = Math.round((stat.totalConfidence / stat.count) * 100) / 100;
        });
        
        return {
            total,
            normalCount,
            abnormalCount,
            confidenceRate,
            typeStats: Object.values(typeStats)
        };
    }
    
    // 创建诊断结果分布图表
    function createDistributionChart(typeStats) {
        const ctx = document.getElementById('distribution-chart');
        if (!ctx) return;
        
        const diagnosisTypes = [
            { type: '正常', color: '#28a745', hoverColor: '#218838' },
            { type: 'ASC-US', color: '#ffc107', hoverColor: '#e0a800' },
            { type: 'LSIL', color: '#fd7e14', hoverColor: '#e0a800' },
            { type: 'HSIL', color: '#dc3545', hoverColor: '#c82333' },
            { type: '其他', color: '#6c757d', hoverColor: '#5a6268' }
        ];
        
        const labels = [];
        const data = [];
        const backgroundColor = [];
        const hoverBackgroundColor = [];
        
        diagnosisTypes.forEach(diagnosis => {
            const stat = typeStats.find(s => s.type === diagnosis.type);
            if (stat) {
                labels.push(diagnosis.type);
                data.push(stat.count);
                backgroundColor.push(diagnosis.color);
                hoverBackgroundColor.push(diagnosis.hoverColor);
            }
        });
        
        // 销毁现有图表
        if (window.distributionChart) {
            window.distributionChart.destroy();
        }
        
        // 创建新图表
        window.distributionChart = new Chart(ctx, {
            type: 'doughnut',
            data: {
                labels: labels,
                datasets: [{
                    data: data,
                    backgroundColor: backgroundColor,
                    hoverBackgroundColor: hoverBackgroundColor,
                    borderWidth: 2,
                    borderColor: '#fff',
                    hoverOffset: 20
                }]
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                animation: {
                    animateScale: true,
                    animateRotate: true,
                    duration: 1000,
                    easing: 'easeOutQuart'
                },
                plugins: {
                    legend: {
                        position: 'right',
                        labels: {
                            font: {
                                size: 12,
                                family: 'Arial, sans-serif'
                            },
                            padding: 15,
                            usePointStyle: true,
                            pointStyle: 'circle'
                        }
                    },
                    tooltip: {
                        backgroundColor: 'rgba(0, 0, 0, 0.8)',
                        padding: 12,
                        cornerRadius: 8,
                        titleFont: {
                            size: 14
                        },
                        bodyFont: {
                            size: 13
                        },
                        callbacks: {
                            label: function(context) {
                                const label = context.label || '';
                                const value = context.raw || 0;
                                const total = context.dataset.data.reduce((a, b) => a + b, 0);
                                const percentage = total > 0 ? Math.round((value / total) * 100) : 0;
                                return `${label}: ${value} (${percentage}%)`;
                            }
                        }
                    }
                },
                cutout: '50%',
                hover: {
                    mode: 'nearest',
                    intersect: true
                }
            }
        });
    }
    
    // 创建近期诊断趋势图表
    function createTrendChart(data) {
        const ctx = document.getElementById('trend-chart');
        if (!ctx) return;
        
        // 按日期分组数据
        const dailyData = {};
        data.forEach(item => {
            const dateKey = formatDate(item.timestamp);
            if (!dailyData[dateKey]) {
                dailyData[dateKey] = {
                    normal: 0,
                    abnormal: 0,
                    total: 0
                };
            }
            if (item.type === '正常') {
                dailyData[dateKey].normal++;
            } else {
                dailyData[dateKey].abnormal++;
            }
            dailyData[dateKey].total++;
        });
        
        // 排序日期
        const sortedDates = Object.keys(dailyData).sort();
        
        // 只显示最近7天的数据（如果数据足够）
        const recentDates = sortedDates.slice(-7);
        const normalData = recentDates.map(date => dailyData[date].normal);
        const abnormalData = recentDates.map(date => dailyData[date].abnormal);
        
        // 销毁现有图表
        if (window.trendChart) {
            window.trendChart.destroy();
        }
        
        // 创建新图表
        window.trendChart = new Chart(ctx, {
            type: 'line',
            data: {
                labels: recentDates,
                datasets: [
                    {
                        label: '正常细胞',
                        data: normalData,
                        borderColor: '#28a745',
                        backgroundColor: 'rgba(40, 167, 69, 0.1)',
                        tension: 0.4,
                        fill: true,
                        borderWidth: 3,
                        pointBackgroundColor: '#fff',
                        pointBorderColor: '#28a745',
                        pointBorderWidth: 2,
                        pointRadius: 5,
                        pointHoverRadius: 7
                    },
                    {
                        label: '异常细胞',
                        data: abnormalData,
                        borderColor: '#dc3545',
                        backgroundColor: 'rgba(220, 53, 69, 0.1)',
                        tension: 0.4,
                        fill: true,
                        borderWidth: 3,
                        pointBackgroundColor: '#fff',
                        pointBorderColor: '#dc3545',
                        pointBorderWidth: 2,
                        pointRadius: 5,
                        pointHoverRadius: 7
                    }
                ]
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                animation: {
                    duration: 1500,
                    easing: 'easeOutQuart'
                },
                plugins: {
                    legend: {
                        position: 'top',
                        labels: {
                            font: {
                                size: 12,
                                family: 'Arial, sans-serif'
                            },
                            padding: 15,
                            usePointStyle: true,
                            pointStyle: 'circle'
                        }
                    },
                    tooltip: {
                        backgroundColor: 'rgba(0, 0, 0, 0.8)',
                        padding: 12,
                        cornerRadius: 8,
                        titleFont: {
                            size: 14
                        },
                        bodyFont: {
                            size: 13
                        }
                    }
                },
                scales: {
                    y: {
                        beginAtZero: true,
                        grid: {
                            color: 'rgba(0, 0, 0, 0.05)'
                        },
                        ticks: {
                            precision: 0,
                            stepSize: 1,
                            font: {
                                size: 11
                            }
                        }
                    },
                    x: {
                        grid: {
                            display: false
                        },
                        ticks: {
                            font: {
                                size: 11
                            }
                        }
                    }
                },
                interaction: {
                    mode: 'index',
                    intersect: false
                },
                hover: {
                    mode: 'nearest',
                    intersect: true
                }
            }
        });
    }
    
    // 获取诊断类型对应的样式类
    function getDiagnosisTypeClass(type) {
        const classMap = {
            '正常': 'text-success font-weight-semibold',
            'ASC-US': 'text-warning font-weight-semibold',
            'LSIL': 'text-orange font-weight-semibold',
            'HSIL': 'text-danger font-weight-semibold',
            '其他': 'text-secondary'
        };
        return classMap[type] || '';
    }
    
    // 更新统计表格
    function updateStatisticsTable(typeStats) {
        const tableBody = document.getElementById('statistics-table-body');
        if (!tableBody) return;
        
        tableBody.innerHTML = '';
        
        if (typeStats.length === 0) {
            const emptyRow = document.createElement('tr');
            emptyRow.innerHTML = '<td colspan="4" class="text-center text-muted py-4">暂无数据</td>';
            tableBody.appendChild(emptyRow);
            return;
        }
        
        // 按数量降序排序
        typeStats.sort((a, b) => b.count - a.count);
        
        // 为表格行添加动画效果
        let delay = 0;
        typeStats.forEach(stat => {
            const row = document.createElement('tr');
            row.className = 'hover:bg-gray-50 transition-colors duration-150';
            row.style.opacity = '0';
            row.style.transform = 'translateY(10px)';
            row.style.transition = `opacity 0.3s ease, transform 0.3s ease`;
            row.style.transitionDelay = `${delay}ms`;
            
            const typeClass = getDiagnosisTypeClass(stat.type);
            const confidenceClass = stat.avgConfidence >= 0.8 ? 'text-success' : 
                                   (stat.avgConfidence >= 0.6 ? 'text-warning' : 'text-danger');
            
            row.innerHTML = `
                <td class="py-3 px-4 ${typeClass}">${stat.type}</td>
                <td class="py-3 px-4 font-medium">${stat.count}</td>
                <td class="py-3 px-4">
                    <div class="d-flex items-center">
                        <div class="w-24 bg-gray-200 rounded-full h-2.5 mr-2">
                            <div class="h-2.5 rounded-full bg-blue-600" style="width: ${stat.percentage}%"></div>
                        </div>
                        ${stat.percentage}%
                    </div>
                </td>
                <td class="py-3 px-4 ${confidenceClass} font-medium">${(stat.avgConfidence * 100).toFixed(1)}%</td>
            `;
            
            tableBody.appendChild(row);
            
            // 触发动画
            setTimeout(() => {
                row.style.opacity = '1';
                row.style.transform = 'translateY(0)';
            }, 10);
            
            delay += 50;
        });
    }
    
    // 数字动画函数
    function animateNumber(elementId, targetValue, duration = 1000, suffix = '') {
        const element = document.getElementById(elementId);
        if (!element) return;
        
        const startValue = 0;
        const increment = (targetValue - startValue) / (duration / 16);
        let currentValue = startValue;
        
        const timer = setInterval(() => {
            currentValue += increment;
            if (currentValue >= targetValue) {
                clearInterval(timer);
                currentValue = targetValue;
            }
            
            if (suffix === '%') {
                element.textContent = `${Math.round(currentValue)}${suffix}`;
            } else {
                element.textContent = Math.round(currentValue) + suffix;
            }
        }, 16);
    }
    
    // 更新统计卡片
    function updateStatisticsCards(stats) {
        // 使用动画效果更新数字
        animateNumber('total-diagnoses', stats.total);
        animateNumber('normal-count', stats.normalCount);
        animateNumber('abnormal-count', stats.abnormalCount);
        animateNumber('confidence-rate', stats.confidenceRate, 1000, '%');
    }
    
    // 导出统计数据
    function exportStatistics(stats, timeRange) {
        const timeRangeText = {
            'all': '全部时间',
            'today': '今天',
            'week': '本周',
            'month': '本月',
            'quarter': '近三个月'
        };
        
        let csvContent = `诊断统计分析 - ${timeRangeText[timeRange] || '全部时间'}\n`;
        csvContent += `生成时间: ${new Date().toLocaleString('zh-CN')}\n\n`;
        
        csvContent += '总体统计:\n';
        csvContent += `总诊断次数,${stats.total}\n`;
        csvContent += `正常细胞,${stats.normalCount}\n`;
        csvContent += `异常细胞,${stats.abnormalCount}\n`;
        csvContent += `高置信度率,${stats.confidenceRate}%\n\n`;
        
        csvContent += '详细统计:\n';
        csvContent += '诊断类型,数量,占比,平均置信度\n';
        
        stats.typeStats.forEach(stat => {
            csvContent += `${stat.type},${stat.count},${stat.percentage}%,${(stat.avgConfidence * 100).toFixed(1)}%\n`;
        });
        
        // 创建下载链接
        const blob = new Blob([csvContent], { type: 'text/csv;charset=utf-8;' });
        const url = URL.createObjectURL(blob);
        const link = document.createElement('a');
        link.setAttribute('href', url);
        link.setAttribute('download', `statistics_${new Date().getTime()}.csv`);
        link.style.visibility = 'hidden';
        document.body.appendChild(link);
        link.click();
        document.body.removeChild(link);
    }
    
    // 初始化统计页面
    function initStatistics() {
        // 设置初始化标志
        window.statisticsInitialized = true;
        
        console.log('开始初始化统计页面...');
        
        // 确保Chart.js已加载
        if (typeof Chart === 'undefined') {
            console.error('Chart.js未加载，无法初始化图表');
            const chartContainers = document.querySelectorAll('.chart-container');
            chartContainers.forEach(container => {
                container.innerHTML = '<div class="text-center py-16 text-gray-500"><i class="fa fa-chart-pie text-4xl mb-4"></i><p>图表加载失败，请刷新页面重试</p></div>';
            });
            return;
        }
        
        console.log('Chart.js已加载，开始创建图表...');
	        
	        // 直接使用静态数据，不生成模拟数据
	        console.log('静态数据已准备好，准备初始化图表...');
        
        // 获取时间范围选择器
        const timeRangeSelect = document.getElementById('statistics-time-range');
        const exportButton = document.getElementById('export-statistics');
        
	        // 更新统计数据的函数（使用静态数据）
	        function updateStatistics() {
            try {
                console.log('使用静态数据更新统计...');
                
                // 直接使用静态数据
                const stats = staticStats;
                const trendData = staticTrendData;
                
                // 更新各个组件
                updateStatisticsCards(stats);
                updateStatisticsTable(stats.typeStats);
                
                // 确保canvas元素存在
                const distributionCanvas = document.getElementById('distribution-chart');
                const trendCanvas = document.getElementById('trend-chart');
                
                if (distributionCanvas && trendCanvas) {
                    console.log('找到图表canvas元素');
                    
                    // 为图表容器设置明确的高度
                    const chartContainers = document.querySelectorAll('.chart-container');
                    chartContainers.forEach(container => {
                        container.style.height = '350px';
                        container.style.width = '100%';
                        container.style.position = 'relative';
                    });
                    
                    // 也为canvas本身设置尺寸
                    distributionCanvas.style.width = '100%';
                    distributionCanvas.style.height = '350px';
                    trendCanvas.style.width = '100%';
                    trendCanvas.style.height = '350px';
                    
                    // 清除现有的图表实例
                    if (window.distributionChart) {
                        window.distributionChart.destroy();
                        window.distributionChart = null;
                    }
                    if (window.trendChart) {
                        window.trendChart.destroy();
                        window.trendChart = null;
                    }
                    
                    console.log('准备创建新图表...');
                    
                    // 直接创建图表，不延迟
                    createDistributionChart(stats.typeStats);
                    createTrendChart(trendData);
                    
                    console.log('图表创建完成');
                    
                    // 图表创建后触发重绘
                    setTimeout(() => {
                        window.dispatchEvent(new Event('resize'));
                        console.log('触发窗口调整事件以重绘图表');
                    }, 200);
                } else {
                    console.error('Canvas元素未找到');
                }
            } catch (error) {
                console.error('更新统计数据时出错:', error);
            }
        }
        
        // 绑定时间范围变化事件
        if (timeRangeSelect) {
            timeRangeSelect.addEventListener('change', updateStatistics);
        }
        
        // 绑定导出按钮事件
        if (exportButton) {
            exportButton.addEventListener('click', function() {
                const timeRange = timeRangeSelect.value || 'all';
                exportStatistics(staticStats, timeRange);
            });
        }
        
        // 初始更新
        updateStatistics();
    }
    
    // 简化的初始化函数，在window.onload时执行
    window.onload = function() {
        console.log('页面加载完成，准备初始化图表...');
        
        // 直接初始化统计页面
        initStatistics();
    };
    
    // 额外添加一个定时检查，确保在Chart.js加载后初始化
    setTimeout(function() {
        if (typeof Chart !== 'undefined' && !window.statisticsInitialized) {
            console.log('定时检查：初始化统计页面');
            initStatistics();
        }
    }, 1000);
</script>